<template>
  <div>
    <div class="title">
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>品牌管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增品牌</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- bottom -->
    <div class="bottom_list">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="品牌名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload class="upload-demo" action="http://127.0.0.1:7001/api/loadUp" :on-success="handleAvatarSuccess">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="展示位置">
          <el-input type="text" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定添加</el-button>
          <el-button @click="falsup">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { adminMing } from '../../../api/index'
export default {
  data() {
    return {
      form: {
        //品牌名称
        name: '',
        //排序
        sort: '',
        resource: '1',
        //展示的位置
        desc: '',
      },
      fileList: [],
    }
  },
  methods: {
    //上传图片
    handleAvatarSuccess(res, file) {
      this.fileList.push('http://127.0.0.1:7001' + res.data)
      //   console.log(this.fileList)
      // console.log(res, file)
    },
    //添加
    onSubmit() {
      let obj = {
        brandName: this.form.name,
        image: this.fileList,
        sort: this.form.sort,
        xianshi: this.form.resource,
        addspp: this.form.desc,
      }
      adminMing(obj).then((res) => {
        // console.log(res)
        this.$router.push({
          name: 'brand',
        })
      })
    },
    //取消
    falsup() {
      this.$router.push({
        name: 'brand',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
  margin-bottom: 40px;
}
//bottom
.bottom_list {
  width: 400px;
  height: 400px;
}
</style>
